<template>
    <div class="user-search">
        <el-form :inline="true" :model="queryInfo" class="form-inline">
            <el-form-item label="用户名">
            <el-input v-model="queryInfo.username" placeholder="请输入用户名" style="width: 170px;" clearable />
            </el-form-item>
            <el-form-item label="用户昵称">
            <el-input v-model="queryInfo.nickName" placeholder="请输入用户昵称" style="width: 170px;" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getList">搜索</el-button>
              <el-button icon="Delete" @click="reset()">重置</el-button>
              <el-button type="primary" icon="CirclePlusFilled" @click="addForm()">添加</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="user-table">
        <el-table :data="tableData" style="width: 1200px; overflow-x: auto !important; margin: 0 auto;">
            <el-table-column label="序号" width="50">
              <template #default="{ $index }">
                {{ $index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名称" width="100"/>
            <el-table-column prop="nickName" label="昵称" width="100"/>
            <el-table-column prop="email" label="邮箱" width="200"/>
            <el-table-column prop="phone" label="电话" width="200"/>
            <el-table-column prop="point" label="积分" width="100"/>
            <el-table-column prop="name" label="姓名" width="100"/>
            <el-table-column prop="address" label="地址" width="250"/>
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="modify(scope.row)">
                    修改
                    </el-button><br/>
                    <el-button link type="primary" icon="Delete" @click="del(scope.$index)">
                    删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
          style="width: 1200px; margin: 20px auto 0 auto;"
          v-model:current-page="queryInfo.pageNum"
          v-model:page-size="queryInfo.pageSize"
          :page-sizes="[3, 5, 10, 20]"
          size="default"
          background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
    </div>
  
    <el-dialog 
      v-model="addFormVisible" 
      :title="dialogType==0?'添加':'修改'" 
      width="500"
      @close="cancel"
      >
      <el-form :model="userInfor">
        <el-form-item label="用户名称">
            <el-input v-model="userInfor.username" :disabled="dialogType==1" placeholder="输入用户名称" autocomplete="off" />
            <!-- 用户名称不可改 -->
        </el-form-item>
        <el-form-item label="用户密码">
            <el-input v-model="userInfor.password" :disabled="dialogType==1" placeholder="输入用户密码" autocomplete="off" />
            <!-- 打咩，管理员不许修改用户密码。 -->
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="userInfor.nickName" placeholder="输入昵称" style="margin-left: 30px;"  autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱">
            <el-input v-model="userInfor.email" placeholder="输入邮箱" style="margin-left: 30px;" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="userInfor.phone" placeholder="输入手机号" style="margin-left: 15px;" autocomplete="off" />
        </el-form-item>
        <el-form-item label="积分">
            <el-input v-model="userInfor.point" placeholder="输入积分" style="margin-left: 30px;" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名">
            <el-input v-model="userInfor.name" placeholder="输入姓名" style="margin-left: 30px;" autocomplete="off" />
        </el-form-item>
        <el-form-item label="地址">
            <el-input type="textarea" v-model="userInfor.address" placeholder="输入姓名" style="margin-left: 30px;" autocomplete="off" />
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel2">取消</el-button>
          <el-button type="primary" @click="addOrModifyInfor()">
            {{ dialogType==0?'添加':'修改' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref,onMounted } from 'vue'
  import {ElMessage , ElMessageBox } from 'element-plus'
  import axios from 'axios'
  const addFormVisible = ref(false)
  
  const totalNum = ref(0);
  
  const dialogType = ref(0);
  
  
  // 定义一个方法当页面加载后立马执行的代码
  onMounted(()=>{
    // console.log('onMounted');
    getList();
  })
  // 定义一个全局的查询参数变量
  const queryInfo = ref({
    pageNum:'',
    pageSize: 5,
    username:'',
    nickName:''
  })
  
  //重置并刷新
  function reset() {
      queryInfo.value.username = '';
      queryInfo.value.nickName = '';
      getList();
  }
  
  // 定义一个方法，当页码发生变化时，调用后端接口，获取文章列表
  const handleCurrentChange = (val)=>{
    queryInfo.value.pageNum = val;
    getList();
  }
  
  // 定义一个方法，当每页显示的条数发生变化时，调用后端接口，获取文章列表
  const handleSizeChange = (val)=>{
    queryInfo.value.pageSize = val;
    queryInfo.value.pageNum = 1;
    getList(); 
  }
  
  //定义一个方法，来动态的调用后端接口，获取文章列表
  const getList = ()=>{
  
    // 使用axios调用后端接口获取数据
    axios.get('/user/selectAll',{
        params: queryInfo.value
    })
    .then(resp=>{
        //console.log(resp.data);
        let result = resp.data;
        if(result.code==1){
            tableData.value = result.data.list;  
            totalNum.value = result.data.total;
            //console.log('获取文章列表成功');      
        }else{
            console.log('获取文章列表失败')
        }
    })
    
  }
  
  
  const tableData = ref([
  {
    id: '',
    username: '',
    password: '',
    nickName: '',
    email: '',
    phone: '',
    point: '',
    name: '',
    address: ''
  }
  ])
  
  const userInfor = ref({
    id: '',
    username: '',
    password: '',
    nickName: '',
    email: '',
    phone: '',
    point: '',
    name: '',
    address: ''
  })
  
  const fileList = ref([]);
  const imageUrl=ref('');
  

  function addForm() {
    dialogType.value = 0;
    userInfor.value.username = '';
    userInfor.value.password = '';
    userInfor.value.nickName = '';
    userInfor.value.email = '';
    userInfor.value.point = '';
    userInfor.value.name = '';
    userInfor.value.address = '';
  
  
    addFormVisible.value=true;
  }
  
  function modify(row) {
    dialogType.value = 1;
    userInfor.value = row;
    addFormVisible.value=true;
    console.log(userInfor.value.imageUrl);
  
    // 把图片的名称和路径放入到fileList中
    if(userInfor.value.imageUrl==''||userInfor.value.imageUrl==null){
      fileList.value = [];
    }else{
      fileList.value = [{
      name: userInfor.value.imageUrl,
      url: url.value + userInfor.value.imageUrl
      }];
    }
  }
  
  function addOrModifyInfor() {

  
  if(dialogType.value==0){
    axios.post('/user/addUser',userInfor.value) 
    .then(resp=>{
        // console.log(resp.data)
        let result =  resp.data;  // resp是promise对象，.data返回我们自己的标准R
          if(result.code==1){          
              // 重新获取列表
              getList(); 
          } else{
              console.log('添加文章失败')
          }
      })
    }else{
      axios.put('/user/updateU',userInfor.value) 
    .then(resp=>{
          // console.log(resp.data)
          let result =  resp.data;  // resp是promise对象，.data返回我们自己的标准R
          if(result.code==1){
              // 重新获取列表
              getList(); 
          } else{
              console.log('修改文章失败') 
          }
    })
    }
  
    userInfor.value = {
      id: '',
      username: '',
      password: '',
      nickName: '',
      email: '',
      phone: '',
      point: '',
      name: '',
      address: ''
    }
    addFormVisible.value=false;
  }
  
  // function delImgInPan(){
  //   console.log(delUrl.value);
  //   axios.delete('http://localhost/file/delete',{params: {fileName: delUrl.value}})
  // }
  
  function cancel2() {
    // delImgInPan();
    addFormVisible.value=false;
  }
  
  function cancel() {
  getList();
  userInfor.value = {
    id: '',
    username: '',
    password: '',
    nickName: '',
    email: '',
    phone: '',
    point: '',
    name: '',
    address: ''
  }
  fileList.value = [];
  imageUrl.value = '';
  }
  
  function del(n) {
  let id = tableData.value[n].id;
  
  delUrl.value = tableData.value[n].imageUrl;
  ElMessageBox.confirm(
    '你确定要删除吗？',
    '确定',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    }
  )
    .then(() => {
      // 调用后端接口删除
      axios.delete('/user/'+id)
        .then(resp=>{
            // console.log(resp.data)
            let result =  resp.data;  // resp是promise对象，.data返回我们自己的标准R 
            if(result.code==1){
              delImgInPan();  // 删除图片
              // 重新获取列表
              getList(); 
              ElMessage({
                  message: '删除成功！',
                  type: 'success',
              })
            }else{
                ElMessage({
                    message: '删除失败！',
                    type: 'warning',
                })
            }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
  }
  
  </script>
  
  <style scoped>
  .user-search{ width: 800px; margin: 30px;}
  .user-table{ z-index: 0;position: relative;}
  
  .avatar-uploader .el-upload {
  border: 1px dashed black;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
  }
  
  .el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 160px;
  height: 160px;
  text-align: center;
  }
  .avatar-uploader .avatar {
  width: 160px;
  height: 160px;
  display: block;
  }
  
  </style>